<template>
    <el-form :model="localModelProp" label-width="110" label-position="left" ref="formRef"
        :rules="submitRules(props.modelForm)">
        <template v-for="item in props.modelForm" :key="item.prop">
            <el-form-item :label="item.name" :prop="item.prop">
                <el-input v-if="item.type == 'input'" v-model="localModelProp[item.prop]"
                    :placeholder="'请输入' + item.name">
                </el-input>
                <el-input v-if="item.type == 'input_number'" type="number" v-model="localModelProp[item.prop]"
                    :placeholder="'请输入' + item.name">
                </el-input>
                <el-select v-if="item.type == 'select'" v-model="localModelProp[item.prop]"
                    :placeholder="'请选择' + item.name" @focus="setSelectOption(item)">
                    <el-option v-for="op in item?.options" :key="op.value" :label="op.label" :value="op.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </template>
    </el-form>
</template>

<script setup lang="ts">
import { ObjectBaseInterface } from '@/api/type';
import { submitRules } from '@/utils/dataFormatSpecification';
import { FormInstance } from 'element-plus';
import { computed, ref } from 'vue';

interface optionsInterface {
    value: string,
    label: string
}

export interface modelFormInterface {
    type: string,
    prop: string,
    name: string,
    options?: optionsInterface[],
    rules?: Record<string, unknown>[]
}

interface propsInterface {
    modelForm: modelFormInterface[],
    modelProp: ObjectBaseInterface,
}
const props = defineProps<propsInterface>()

const emits = defineEmits(['update:modelProp', 'enterSearch', 'enterDelete', "optionsUpdate"])
const localModelProp = computed({
    get: () => props.modelProp,
    set: (value) => emits('update:modelProp', value)
})
/**
 * @description 设置select的options
 */
const setSelectOption = (info: modelFormInterface) => {
    emits('optionsUpdate', info)
}



const formRef = ref<FormInstance>()

defineExpose({
    formRef
})
</script>